<template>
  <div id="window" @contextmenu.prevent.self="openWindowMenu"
       v-loading="loading" element-loading-text="Loading..." element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <div v-for="item in dataList" :key="item.name" style="overflow: hidden;float: left">
      <folder v-if="item.type === 'd'" :name="item.name"></folder>
      <file v-else :name="item.name"></file>
    </div>

    <div v-if="isEmpty" class="empty"></div>

    <ul v-show="menuVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu" ref="menuRef">
      <li @click="handleClickRefresh">刷新</li>
      <li @click="gotoParent">转到上一级</li>
      <li @click="handleUpload">上传文件</li>
      <li @click="handleDownload">下载文件</li>
      <li @click="showTerminal">终端</li>
      <li @click="handleToggleNavbar" v-if="navbarConfig.show">隐藏顶栏</li>
      <li @click="handleToggleNavbar" v-else>显示顶栏</li>
    </ul>
  </div>
</template>

<script>
import Folder from "@/components/Folder/Folder.vue";
import File from "@/components/File/File.vue";
import {mapGetters} from "vuex";
import 'xterm/css/xterm.css'
import {Terminal} from 'xterm'
import {TerminalXterm} from '@/components/Terminal/terminal'
import {b64_to_utf8, utf8_to_b64} from '@/utils/utils'
import {ElMessage} from "element-plus";

export default {
  name: "Index",
  components: {Folder, File},
  computed: {
    ...mapGetters([
      'navbarConfig',
    ]),
    curUserID() {
      return this.$store.state.user.userID
    },
    clientName() {
      let path = this.$route.path
      let index = path.lastIndexOf('/')
      return path.substring(index + 1)
    },
  },

  created() {
    this.executeShell()
  },

  mounted() {
    // 网页内容不可选中
    document.onselectstart = function () {
      return false
    }
  },

  beforeDestroy() {
    this.socket.close()
    this.term.dispose()
  },

  watch: {
    menuVisible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },

  data() {
    return {
      dataList: [],
      menuVisible: false,
      top: 0,
      left: 0,
      isEmpty: false,
      loading: true,
    }
  },

  methods: {
    executeShell() {
      let path = b64_to_utf8(this.$route.query.path)
      let route = this.$route.fullPath
      var index = route.lastIndexOf('?');
      let name = route.substring(4, index)

      let shell = 'ls -l '
      shell += path

      let requestObj = {'shell': shell, 'name': name}
      this.$store.dispatch("ExecuteShell", requestObj)
          .then((res) => {
            this.loading = false
            var array = res.split("\n");
            array.forEach((item) => {
              var subArr = item.split(" ");
              var name = subArr[subArr.length - 1];
              var obj = new Object()
              if (item.substring(0, 1) === "d") {
                obj.type = "d"
                obj.name = name
                this.dataList.push(obj)
              } else if (item.substring(0, 1) === "-") {
                obj.type = "f"
                obj.name = name
                this.dataList.push(obj)
              }
            })

            if (this.dataList.length > 0) {
              this.isEmpty = false
            } else {
              this.isEmpty = true
            }
          })
    },

    openWindowMenu(e) {
      this.menuVisible = true
      let left = 0, top = 0
      let width = 200
      let height = 200

      left = e.pageX
      top = e.offsetY

      if (e.pageX >= window.innerWidth - width) {
        left = e.pageX - width
      }

      if (e.clientY + height >= window.innerHeight) {
        top = e.offsetY - height
      }

      this.left = left
      this.top = top
    },

    closeMenu() {
      this.menuVisible = false
    },

    handleClickRefresh() {
      this.dataList = []
      this.executeShell()
    },

    handleToggleNavbar() {
      this.$store.dispatch('toggleNavBar');
    },

    showTerminal() {
      TerminalXterm({title: this.clientName, curUserID: this.curUserID, clientName: this.clientName})
    },

    gotoParent() {
      let route = this.$route.path
      let path = b64_to_utf8(this.$route.query.path);
      if (path === '/') {
        ElMessage({
          message: "没有上级目录了",
          type: 'info'
        })
        return
      }

      let index = path.lastIndexOf('/')
      let parent = ''
      if (index === 0) {
        parent = '/'
      } else {
        parent = path.substring(0, index)
      }

      this.$router.push({
        path: route,
        query: {
          path: utf8_to_b64(parent)
        }
      })
    },

    handleUpload() {
      ElMessage({
        message: '功能尚未完善',
        type: 'info',
        duration: 3 * 1000
      })
    },

    handleDownload() {
      ElMessage({
        message: '功能尚未完善',
        type: 'info',
        duration: 3 * 1000
      })
    }

  }

}
</script>

<style scoped lang="scss">
#window {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  padding: 10px;
}

.empty {
  width: 300px;
  height: 300px;
  background: url("@/assets/images/empty.png") no-repeat;
}

.contextmenu {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #fff;
  padding: 8px 0;
  border-radius: 10px;

  li {
    font-family: Sans-serif;
    text-align: left;
    color: #000;
    padding: 5px 0 5px 20px;

    &:hover {
      cursor: pointer;
      color: #fff;
      background-color: #9f9fa3;
    }
  }
}

#xterm {
  width: 100%;
  height: 300px;
}

</style>
